<template>
	<view>
		<uni-nav-bar :title="form.pid ? '置换' : '发布'" left-icon="back" @clickLeft="$tab.back()" :fixed="true"
			:statusBar="true" :border="false"></uni-nav-bar>

		<div class="px-32 py-48 bg-white">
			<u--textarea v-model="form.detail" placeholder="请输入详细需求~" border="none"></u--textarea>

			<div class="mb-20">
				图片上传
			</div>
			<u-upload :fileList="photoList" @afterRead="productAfterRead" @delete="productDeletePic" name="1"
				:maxCount="3"></u-upload>
		</div>

		<div class="px-32 bg-white mt-32">
			<div class="">
				<div class="py-32 flex items-center justify-between">
					<div class="text-32">
						产品价格
					</div>
					<input type="number" v-model="form.price" placeholder="请输入产品价格" class="text-right"
						@input="getPrice" />
				</div>
				<u-line color="#F3F3F3"></u-line>
			</div>
			<div class="">
				<div class="py-32 flex items-center justify-between">
					<div class="flex items-center">
						<div class="text-32 mr-12">
							手续费
						</div>
						<u-icon name="question-circle" color="#333333" @click="modalShow = true"></u-icon>
					</div>

					<div class="" style="color: #FF8400;">
						10%
					</div>
				</div>
				<u-line color="#F3F3F3"></u-line>
			</div>
		</div>

		<div class="footer iphoneX">
			<div class="py-16 px-32 flex items-center justify-between">
				<div class="">
					合计: <span style="color: #FF8400;">{{price}}</span>
				</div>

				<div class="confirm" @click="handlePay">支付{{form.pid ? '置换' : '发布'}}</div>
			</div>
		</div>

		<u-popup :show="passwordShow" @close="passwordShow = false,form.payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="form.payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),passwordShow = false">
					确认
				</view>
			</view>
		</u-popup>

		<u-modal :show="modalShow" title="平台收费" content='用户发布需求，平台需要收取用户服务费用（有偿：服务费的10%；）'
			@confirm="modalShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				form: {
					detail: "",
					icons: "",
					price: "",
					payPassword: "",
					pid: null
				},
				photoList: [],
				passwordShow: false,
				price: "",
				modalShow: false
			};
		},
		onLoad(e) {
			thro = this
			this.form.pid = e.id
		},
		methods: {
			async getPrice() {
				const res = await this.$Api.substitution.substitutionFee({
					price: this.form.price
				})
				this.price = res.data
			},
			confirmOrder: throttle(2000, async () => {
				if (!thro.form.payPassword || thro.form.payPassword.length < 6) {
					thro.$modal.msg('请输入6位支付密码!')
					return
				}
				const res = await thro.$Api.substitution.substitution(thro.form)
				thro.$modal.msg(res.msg)

				setTimeout(() => {
					if (thro.form.pid) {
						thro.$tab.back()
					} else {
						thro.$tab.nav(`/pages/index/substitution/mine`)
					}
				}, 1500)
			},{
				noTrailing:true
			}),
			handlePay() {
				if (!this.form.detail) {
					this.$modal.msg('请输入详细需求!')
					return
				}
				if (!this.form.icons) {
					this.$modal.msg('请上传产品图片!')
					return
				}
				if (!this.form.price || this.form.price <= 0) {
					this.$modal.msg('请正确输入产品价格!')
					return
				}
				this.form.payPassword = ""
				this.passwordShow = true
			},
			productAfterRead(event) {
				this.$Api.common.uploadFile(event.file.url).then(res => {
					this.photoList.push({
						url: res.url,
						fileName: res.fileName
					})
					this.form.icons = ''
					this.photoList.forEach((item, index) => {
						if (index == 0) {
							this.form.icons = item.fileName
						} else {
							this.form.icons = this.form.icons + ',' + item.fileName
						}
					})
				})
			},
			productDeletePic(event) {
				this.photoList.splice(event.index, 1)
				this.form.icons = ''
				this.photoList.forEach((item, index) => {
					if (index == 0) {
						this.form.icons = item.fileName
					} else {
						this.form.icons = this.form.icons + ',' + item.fileName
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-textarea {
		padding: 0 !important;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		width: 100%;

	}

	.confirm {
		width: 374rpx;
		height: 84rpx;
		background: #FF323B;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		line-height: 84rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
	}
</style>